<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="">
        .box2 {
            padding: 10px;
            height: 1000px;
            background-color: aqua;
            overflow-y: auto;
            -webkit-overflow-scrolling: auto;
            box-sizing: border-box;


        }

        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            height: 20px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100vw;
        }

        .list {
            width: 100%;
            height: 100px;
            background-color: yellow;
            border-radius: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>

    <div class="box2" onscroll="onScroll1()">
        <div onclick="fn()" class="box">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
        </div>

    </div>



    <script>
        var box = document.querySelector('.box')
        var box2 = document.querySelector('.box2')

        var status = true

        function getdata() {
            console.log('获取接口数据');

            status = true
            box.innerHTML += `
            <div class="list">1</div>
            <div class="list">2</div>
            <div class="list">3</div>
            <div class="list">4</div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            `
        }
        function onScroll1() {


            if (status && box.offsetHeight - (box2.offsetHeight + box2.scrollTop) < 10) {
                console.log('滚动到最下面啦');
                getdata()
            }
            //   console.log(document.querySelector('.box').offsetHeight,'1');
            //   console.log(document.querySelector('.box').scrollTop,'2');
            // var boxH = that.$refs.boxH.offsetHeight;`
            // var boxTop = that.$refs.boxH.scrollTop;
            //   console.log('页面滚动');
        }

        function fn() {
            console.log('点击盒子');
        }
        document.body.onscroll = function () {
            //   console.log('body滚动');
        }
        console.log(box);
    </script>
</body>

</html>